* {
    margin: 0;
    padding: 0;
}

$onfontSize:37.5px;
@function pxTorem($font) {
    @return $font/$onfontSize*1rem;
}

.main {
    width: 100%;
    height: pxTorem(350px);
    background: lightcoral;
    border-radius: 10px;
}

.main_log {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .main_log_pic {
        width: 25%;
        height: 50%;
        background: lightblue;
        display: flex;
        flex-direction: column;
        .imgs {
            width: pxTorem(100px);
            flex: 5;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background: lightgreen;
            border-radius: 50%;
        }
        p {
            flex: 5;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    }
}

.mad {
    width: 100%;
    height: pxTorem(450px);
    border: 1px solid #000;
    margin-top: 20px;
    .mad_da {
        width: 100%;
        height: pxTorem(150px);
    }
    .mad_own {
        display: flex;
        p {
            width: pxTorem(300px);
            height: pxTorem(200px);
            border: 1px solid #000;
        }
        width: 100%;
        height: pxTorem(300px);
        background: lightsalmon;
        overflow-x: scroll;
        .mad_own_Hengg {
            width: pxTorem(1000px);
            height: 100%;
            background: lightpink;
            display: flex;
            .mad_own_Hengg_on {
                width: pxTorem(200px);
                height: 100%;
                background: lightskyblue;
                border-radius: 10px;
                margin-left: 10px;
            }
        }
    }
}

.Xial {
    width: 100%;
    overflow: auto;
    .Xial_li {
        width: 100%;
        height: pxTorem(200px);
        background: lightgreen;
        border: 1px solid #000;
    }
}